<template>
	<view class="container">
		<view class="box-bd df jsb ac h100">
			<view class="w30 df ac">
				<view class="title-icon"></view>
				<view class="ml20">日期</view>
			</view>
			<view class="w70 df jse ac">
				<text class="mr-20">{{ paramsData.dailyDateStr }}</text>
			</view>
		</view>
		<view class="box-bd mt20">
			<view class="df ac h100">
				<view class="title-icon"></view>
				<view class="ml20">{{ type == 2 ? '总结' : '建议' }}内容</view>
			</view>
			<view class="df">
				<view
					class="nav-tag"
					:class="{ 'nav-tag-act': item.active }"
					v-for="(item, index) in tagList.filter((t) => t.active)"
					:key="index"
					>{{ item.tagName }}</view
				>
			</view>
			<view class="pd20">
				<view class="mt20">
					<view
						class="mb20"
						style="white-space: pre-wrap"
						v-text="scheduleContent"
					></view>
					<view class="flex-1 g3 textC" v-if="paramsData.voiceUrl">
						<view
							class="mb20"
							style="white-space: pre-wrap"
							v-text="paramsData.voiceText"
						></view>
						<diy-audio
							:file="paramsData.voiceUrl"
							:audioTime="paramsData.voiceDuration"
							:voiceText="paramsData.voiceText"
						></diy-audio>
					</view>
				</view>
				<view class="mt20">
					<view
						v-for="(item, index) in fileList"
						:key="index"
						class="img"
						><image
							@tap="priviewImg(item, index)"
							:src="item.url"
							mode=""
						></image
					></view>
					<!-- <view v-for="(item, index) in fileList" :key="index"><image :src="item.url" mode=""></image></view> -->
				</view>
			</view>
		</view>
		<view class="box-bd" v-if="false">
			<view class="df jsb ac h100 mt20">
				<view class="w30 df ac">
					<view class="title-icon"></view>
					<view class="ml20">可见成员</view>
				</view>
				<view class="w70 df jse ac">
					<view class="w50 text-over tr"
						><text class="mr10">本人</text></view
					>
				</view>
			</view>
			<view class="pd20">
				<text
					class="mb20 ml20"
					v-for="item in userData.filter((u) => u.showFlag)"
					:key="item.id"
					>{{ item.name }}</text
				>
			</view>
		</view>
	</view>
</template>

<script>
const dayjs = require('@/common/dayjs.min.js')
import diyAudio from '@/subPackagesLog/components/diy-audio/diy-audio.vue'
export default {
	components: {
		diyAudio,
	},
	data() {
		return {
			dayjs,
			tagList: [],
			detailsId: '',
			currentTag: 1,
			current: 'voice',
			scheduleId: '',
			scheduleContent: '',
			fileList: [],
			userData: [],
			paramsData: {
				dailyDateStr: '',
			},
			textArr: [
				{ name: '文字输入', type: 'text' },
				{ name: '语音输入', type: 'voice' },
			],
		}
	},
	methods: {
		priviewImg(srcList, index) {
			uni.previewImage({
				urls: this.fileList,
				current: index,
			})
		},
		getDetail() {
			let url =
				this.type == 2
					? 'carer-platform/journal/getUserDailySummaryDetail'
					: 'carer-platform/journal/getUserDailyAdviseDetail'
			this.$request
				.request(url, {
					method: 'get',
					data: { id: this.detailsId },
				})
				.then((res) => {
					let { data } = res
					this.paramsData = res.data
					if (
						this.paramsData.tags &&
						this.paramsData.tags.length > 0
					) {
						this.tagList.map((item) => {
							if (this.paramsData.tags.includes(item.id)) {
								item.active = true
							}
						})
					}
					if (
						this.paramsData.picUrls &&
						this.paramsData.picUrls.length > 0
					) {
						this.paramsData.picUrls.map((item) => {
							this.fileList.push({ url: item })
						})
					}
					if (data.userIds.length > 0) {
						this.userData.map((item) => {
							if (data.userIds.includes(item.id)) {
								item.showFlag = true
							}
						})
					}
					this.scheduleContent = data.content
				})
		},
		// 获取标签
		getTags() {
			this.$request
				.request('carer-platform/carer/businessTag/getBusinessTags', {
					method: 'post',
					data: {
						orgId: uni.getStorageSync('orgId'),
						userId: uni.getStorageSync('userId'),
						typeTags: [9],
					},
				})
				.then((res) => {
					let { data } = res
					if (data) {
						data.map((item) => {
							item.active = false
						})
					}
					this.tagList = data || []
				})
		},

		getUserData() {
			this.$request
				.request('user-web/user/queryPageByDefaultRole', {
					method: 'post',
					data: { roleIds: [-3, -8], pageIndex: 1, pageSize: 500 },
				})
				.then((res) => {
					let data = res.data.data
					if (data) {
						data.map((item) => {
							item.showFlag = false
						})
						data = data.filter(
							(item) => item.id !== uni.getStorageSync('userId')
						)
					}
					this.userData = data || []
				})
		},
	},

	async onLoad(options) {
		let { type, id } = options
		await this.getTags()
		await this.getUserData()
		this.type = type
		if (id) {
			this.detailsId = id
			this.getDetail()
		}
		// this.getTags()
		let title = options.type === '2' ? '写总结' : '写建议'
		wx.setNavigationBarTitle({
			title: title,
		})
	},
}
</script>

<style scoped lang="scss">
.container {
	background-color: #ffffff;
	min-height: calc(100vh -160rpx);
	font-size: 36rpx;
	padding-bottom: 160rpx;
	.box-bd {
		border-radius: 10rpx;
		padding: 0;
	}
	.nav-tag {
		flex: 1;
		margin-left: 10rpx;
		margin-right: 10rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 32rpx;
	}
}
.text-box {
	border-radius: 6rpx;
	border: 2rpx solid #f2f2f2;
	.tab {
		align-items: center;
		justify-content: center;
		text-align: center;
		border-radius: 6rpx 6rpx 0 0;
		view {
			border-radius: 6rpx 6rpx 0 0;
			&.active {
				background-color: $primary-color;
				color: #ffffff;
			}
		}
	}
}
.img {
	width: 45%;
	height: 240rpx;
	display: inline-block;
	margin: 0 20rpx 20rpx 0;
	image {
		width: 100%;
		height: 100%;
	}
}
</style>
